.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #909399;
  border-radius: 50%;
  margin-right: 4px;
}
.dot.success {
  background: #52c41a;
}
.dot.warning {
  background: #faad14;
}
.dot.danger,
.dot .error {
  background: #e02020;
}
[class*=" badge-dot-"],
[class^="badge-dot-"] {
  position: relative;
  margin-left: 8px;
}
[class*=" badge-dot-"]::before,
[class^="badge-dot-"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-150%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #909399;
}
.badge-dot-success::before {
  background: #52c41a;
}
.badge-dot-warning::before {
  background: #faad14;
}
.badge-dot-danger::before,
.badge-dot-error::before {
  background: #e02020;
}
.badge-dot {
  line-height: 1;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  margin-left: 8px;
  position: relative;
}
.badge-dot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-150%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #909399;
  z-index: 999;
}
.badge-dot.success::before {
  background: #52c41a;
}
.badge-dot.warning::before {
  background: #faad14;
}
.badge-dot.danger::before {
  background: #e02020;
}
